<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-06-06 13:39:25
 * @LastEditTime: 2024-07-11 17:56:46
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 配置面板
 * @FilePath: \chu-meng\client\src\pages\Design\components\ConfigArea\index.vue
 * Copyright 版权声明
-->
<template>
  <div class="modWrap">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="属性">
        <component :is="$store.getters['currentSelectedComponentInfo'].configType" :config="$store.getters['currentSelectedComponentInfo'].config">
        </component>
      </a-tab-pane>
      <a-tab-pane key="2" tab="通用"></a-tab-pane>
      <a-tab-pane key="3" tab="交互"></a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup>
// import {
//   RotateLeftOutlined,
//   RotateRightOutlined,
//   FilePptOutlined
// } from '@ant-design/icons-vue'
import { ref } from 'vue'

const activeKey = ref('1')

</script>

<style lang="scss" scoped>
.modWrap{
  :deep(.ant-tabs-nav-wrap) {
    .ant-tabs-nav-list{
      width: 100%;
      flex: 1;
      .ant-tabs-tab{
        display: block;
        margin: 0;
        flex: 1;
        text-align: center;
        padding: 8px 0;
      }
    }
  }
}
</style>
